<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" :border-bottom="false" title-color="#f1f1f1" title="发表评价" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="top">
				<text class="title">服务评价</text>
				<view class="top-content">
					<u-rate v-model="count" size="60" :gutter="50" active-color="#E3AD3B"></u-rate>
					<text v-show="count == 1">差</text>
					<text v-show="count == 2">一般</text>
					<text v-show="count == 3">还行</text>
					<text v-show="count == 4">满意</text>
					<text v-show="count == 5">非常满意</text>
				</view>
			</view>
			<view class="input"><textarea v-model="content" placeholder="您的评价会帮助更多想要购物的人" /></view>
			<view class="btn"><u-button :ripple="true" ripple-bg-color="#8EB7FA" :custom-style="btnStyle" @click="handleComment">提交评价</u-button></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			id: '', // 订单ID
			count: 0, // 评星数
			content: '' // 评价文字
		};
	},
	onLoad(option) {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		if (option) {
			this.id = option.id;
		}
	},
	methods: {
		handleComment() {
			if (this.count == 0) {
				uni.showToast({
					title: '请评星',
					icon: 'none'
				});
				return false;
			} else {
				this.$tkRequest('/api/Orders/comment', {
					id: this.id,
					comment: this.count,
					comment_content: this.content
				}).then(res => {
					uni.showToast({
						title: res.msg
					});
					setTimeout(() => {
						uni.redirectTo({
							url: `../order?current=4`
						});
					}, 1000);
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
	display: flex;
	flex-direction: column;

	.top {
		display: flex;
		flex-direction: column;

		.title {
			padding-bottom: $uni-spacing-col-lg;
			font-size: 12pt;
		}

		.top-content {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 12pt;
			padding: $uni-spacing-col-lg 0;

			text {
				padding-top: $uni-spacing-col-lg;
			}
		}
	}

	.input {
		padding: 40rpx 0;
		border-radius: 15rpx;
		width: 100%;
		display: flex;

		textarea {
			flex: 1;
			padding: $uni-spacing-col-base $uni-spacing-row-base;
			border: 1rpx solid #eee;
			background-color: #fff;
		}
	}
}
</style>
